{% extends 'base/base.html' %}

{% block main %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-tags me-2"></i>标签管理</h2>
    <div>
        <a href="{% url 'main:tag_create' %}" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>新建标签
        </a>
        <a href="{% url 'main:food_library' %}" class="btn btn-outline-secondary">返回食物库</a>
    </div>
</div>

<!-- 搜索和筛选 -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-8">
                <div class="input-group">
                    <input type="text" class="form-control" name="search"
                           placeholder="搜索标签..." value="{{ search_query }}">
                    <button class="btn btn-outline-primary" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
            <div class="col-md-4">
                <a href="{% url 'main:tag_list' %}" class="btn btn-outline-secondary w-100">重置筛选</a>
            </div>
        </form>
    </div>
</div>

{% if tags %}
<div class="row">
    {% for tag in tags %}
    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center"
                 style="background-color: {{ tag.color }}20; border-left: 4px solid {{ tag.color }};">
                <h5 class="card-title mb-0">
                    <span class="badge" style="background-color: {{ tag.color }}; color: white;">
                        {{ tag.name }}
                    </span>
                </h5>
                <div class="btn-group">
                    <a href="{% url 'main:tag_detail' tag.id %}" class="btn btn-sm btn-outline-info">
                        <i class="fas fa-eye"></i>
                    </a>
                    <a href="{% url 'main:tag_edit' tag.id %}" class="btn btn-sm btn-outline-warning">
                        <i class="fas fa-edit"></i>
                    </a>
                    <a href="{% url 'main:tag_delete' tag.id %}" class="btn btn-sm btn-outline-danger">
                        <i class="fas fa-trash"></i>
                    </a>
                </div>
            </div>
            <div class="card-body">
                {% if tag.description %}
                <p class="card-text">{{ tag.description }}</p>
                {% else %}
                <p class="card-text text-muted">暂无描述</p>
                {% endif %}

                <div class="mt-3">
                    {% if tag.parent %}
                    <small class="text-muted">
                        <i class="fas fa-sitemap me-1"></i>
                        父级标签: <span class="badge" style="background-color: {{ tag.parent.color }};">{{ tag.parent.name }}</span>
                    </small>
                    <br>
                    {% endif %}
                    <small class="text-muted">
                        <i class="fas fa-utensils me-1"></i>
                        关联食物: {{ tag.food_count }}
                    </small>
                    <br>
                    <small class="text-muted">
                        <i class="fas fa-calendar-day me-1"></i>
                        使用记录: {{ tag.record_count }}
                    </small>
                    <br>
                    <small class="text-muted">
                        <i class="fas fa-user me-1"></i>
                        创建者: {{ tag.created_by.username|default:"系统" }}
                    </small>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="text-center py-5">
    <div class="mb-4">
        <i class="fas fa-tags fa-4x text-muted"></i>
    </div>
    <h4 class="text-muted">暂无标签</h4>
    <p class="text-muted">创建第一个标签来更好地组织您的食物和记录</p>
    <a href="{% url 'main:tag_create' %}" class="btn btn-primary">创建标签</a>
</div>
{% endif %}
{% endblock %}